<template>
  <div>
    <van-search placeholder="请输入搜索内容" @change="change" @search="search" @clear="search" shape="round" use-action-slot clearable autofocus>
      <div slot="action" @click="search">搜索</div>
    </van-search>
    <van-cell-group>
      <van-cell icon="bag-o" is-link @click="details(backup)" :title="backup.backupName" :label="backup.backupRemark" :key="backup" v-for="backup in backupList"></van-cell>
    </van-cell-group>
    <van-popup round position="right" :show="show" @close="close()">
      <van-cell-group>
        <van-cell icon="gem-o" :title="backupDocker.dockerServerName" :value="backupDocker.dockerServerVersion" :label="backupDocker.dockerPackageVersion"></van-cell>
      </van-cell-group>
    </van-popup>
    <van-toast id="van-toast"></van-toast>
  </div>
</template>

<script>
  import backupAPI from '@/api/backupAPI'
  import Toast from '@/../static/vant-weapp/toast/toast'

  export default {
    name: 'backup',
    data () {
      return {
        backupDocker: '',
        backupImageList: '',
        backupContainerList: '',
        backupList: [],
        pageSize: 20,
        pageCurrent: 1,
        searchContent: '',
        more: true,
        show: false
      }
    },
    onShow () {
      wx.startPullDownRefresh()
    },
    onPullDownRefresh () {
      var that = this
      that.search()
      wx.stopPullDownRefresh()
    },
    onReachBottom () {
      var that = this
      if (that.more) {
        that.pageCurrent += 1
        that.list()
      } else {
        Toast.fail({
          message: '没有更多',
          forbidClick: true
        })
      }
    },
    methods: {
      change (e) {
        var that = this
        that.searchContent = e.mp.detail
      },
      search () {
        var that = this
        that.backupList = []
        that.pageCurrent = 1
        that.more = true
        that.list()
      },
      list () {
        var that = this
        var user = wx.getStorageSync('user')
        var param = {
          pageSize: that.pageSize,
          pageCurrent: that.pageCurrent,
          searchContent: that.searchContent,
          userId: user.userId
        }
        backupAPI.list(param).then(result => {
          if (result.data === undefined) {
            result.data = []
          }
          that.backupList = that.backupList.concat(result.data)
          if (result.data.length < that.pageSize) {
            that.more = false
          }
        })
      },
      details (backup) {
        var that = this
        var param = {
          backupId: backup.backupId
        }
        backupAPI.details(param).then(result => {
          var backup = result.data
          that.backupDocker = backup.backupDocker
          that.backupImageList = backup.backupImageList
          that.backupContainerList = backup.backupContainerList
          that.show = true
        })
      },
      close () {
        var that = this
        that.show = false
      }
    }
  }
</script>

<style scoped>
</style>
